<template>
  <div class="page-container">
    <div ref="con" class="container-chart">
      <!-- 第一个页面 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xdata: [],
      seriesData: [],
      chart:''
    };
  },
  mounted() {
    this.$axios.get("/plantingHarvest").then((res) => {
      console.log(res, "响应");
      this.xdata = res.data.map((item) => item.month);
      this.seriesData = res.data.map((item) => item.harvest);
      this.$nextTick(() => {
        this.initEchart();
        this.screen()
      });
    });
    //设置监听事件
    window.addEventListener("resize", () => {
      // console.log(this.$refs.con.offsetWidth, "监听到尺寸变化了");
      this.screen();
    });
  },
  methods: {
    //封装一个改变图形的函数
    screen() {
      //可视宽度
      let width = this.$refs.con.offsetWidth;
      //设置字体的大小号
      //这个公式是我们自己测试出来
      let num = (width / 100) * 6;
      //改变数据图形的大小
      this.chart.resize();
      //重新去创建一个配置项
      let option = {
        title: {
          text: "各地区种植面积统计Top10",
          textStyle: {
            fontSize: num,
          },
        },
      };
      //重新设置一下配置项
      this.chart.setOption(option);
    },
    initEchart() {
      let myChart = this.$echarts.init(this.$refs.con);
      this.chart = myChart
      let options = {
        title: {
          text: "全国种植每月收成情况",
          left:'5%',
          top:'3%'
        },
        grid:{
          left:"15%",
          top:'15%',
          right:'8%',
          bottom:'8%'
        },
        xAxis: {
          data: this.xdata,
        },
        tooltip: {
          show: true,
        },
        yAxis: {
          //是否显示坐标轴的轴线
          axisLine: {
            show: true,
          },
          //坐标轴的刻度
          axisTick: {
            show: true,
          },
        },
        series: {
          type: "bar", //柱状图
          data: this.seriesData,
          label: {
            show: true,
            position: "top",
          },
          itemStyle: {
            // 左上 右上  右下 左下
            barBorderRadius: [40, 40, 0, 0],
            opacity: 1, //透明度
            //   color:'tomato'
            color: {
              // x,y 起点  x1,y1 终点 横向的渐变 。纵向 x2,y2["#6EABDA", "#2D5A7D"],
              type: "line",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#6EABDA",
                },
                {
                  offset: 1,
                  color: "#2D5A7D",
                },
              ],
            },
          },
        },
      };
      myChart.setOption(options);
    },
  },
};
</script>

